<template>
  <quill-editor
    v-model="editContent"
    ref="myQuillEditor"
    :options="editorOption"
    placeholder="请输入文章内容"
  >
  </quill-editor>
</template>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import hljs from "highlight.js";
import "highlight.js/styles/default.css";

import ImageUploader from "quill-image-uploader";
Quill.register("modules/imageUploader", ImageUploader);

import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

import { FileStore } from "@/store/models/file";

export default {
  name: "RichTextEditor",
  model: {
    prop: "content",
    event: "change",
  },
  components: {
    quillEditor,
  },
  props: {
    content: {
      type: String,
      required: false,
    },
  },
  data: () => ({
    editorOption: {
      modules: {
        toolbar: [
          ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
          ["blockquote", "code-block"], //引用，代码块

          [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
          [{ list: "ordered" }, { list: "bullet" }], //列表
          [{ script: "sub" }, { script: "super" }], // 上下标
          [{ indent: "-1" }, { indent: "+1" }], // 缩进
          [{ direction: "rtl" }], // 文本方向

          [{ size: ["small", false, "large", "huge"] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

          [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
          [{ font: [] }], //字体
          [{ align: [] }], //对齐方式

          ["clean"], //清除字体样式
          ["link", "image"], //上传图片、如果后期要支持上传视频 ['link', 'image', 'video']
        ],
        imageUploader: {
          upload: (file) => {
            return FileStore.upload(file, "articleImages").then((res) => {
              return res.url;
            });
          },
        },
        imageResize: true,
        imageDrop: true,
        syntax: {
          highlight: (text) => hljs.highlightAuto(text).value,
        },
      },
      theme: "snow",
    },
  }),
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
    editContent: {
      get() {
        return this.content;
      },
      set(val) {
        const content_text = this.editor.getText()
        this.$emit("update:contentText", content_text)
        this.$emit("change", val); // 告诉父组件选择分类更新了
      },
    },
  },
  methods: {},
};
</script>
